// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.store-slider {
  @preset-font-size: 12px;
  @preset-height: 20px;
  @preset-margin: 4px;
  @preset-width: 36px;
  @callout-padding: 6px;
  @callout-extension: 32px;

  // inset slider to prevent overflows making the page wider.
  // the 2px is to add a gap between the callout and the page edge.
  padding: 0 (@slider-callout--width / 2 - @gutter-v2 + 2px);

  @media @desktop {
    padding: 0
      (
        (@slider-callout--width + @callout-extension) / 2 - @gutter-v2-desktop +
          2px
      );
  }

  &__bigtext {
    // stupid name
    font-size: @font-size--large;
    font-weight: 600;
  }

  &__fake-callout {
    position: absolute;
    left: (@slider-handle-width / 2);
    padding-bottom: @slider-callout--arrow-height;
    transform: translateX(-50%);
    bottom: calc(100% + @slider-callout--arrow-gap);
  }

  &__callout {
    background-color: @osu-colour-b3;
    color: @osu-colour-c1;
    font-size: @font-size--normal;
    text-align: center;
    border-radius: 10px;
    padding: 6px;
    width: @slider-callout--width;
    position: relative;

    @media @desktop {
      // make fatter for wider viewports.
      width: @slider-callout--width + @callout-extension;
    }

    &::after,
    &::before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: "";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      transform: scaleX(0.5);
    }

    &::after {
      border-top-color: @osu-colour-b3;
      border-width: @slider-callout--arrow-height;
      margin-left: -@slider-callout--arrow-height;
    }
  }

  &__preset {
    background-color: @osu-colour-b3;
    color: #fff;
    cursor: pointer;
    margin: @preset-margin;
    height: @preset-height;
    width: @preset-width;
    line-height: @preset-height - 1px;
    text-align: center;
    border-radius: 10px;

    &--active {
      background-color: @osu-colour-pink-1;
    }

    &--disabled {
      background-color: @osu-colour-b1;
      pointer-events: none;
      cursor: default;
    }
  }

  &__presets {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: @preset-font-size;
  }

  &__presets-blurb {
    margin: 0 @preset-margin;
  }

  &__subtext {
    // stupid name
    margin-top: 2px;
    color: @osu-colour-c2;
  }

  .ui-slider {
    background-color: @osu-colour-b3;

    .ui-slider-handle {
      background-color: @osu-colour-pink-1;
    }

    .ui-slider-range {
      background-color: @osu-colour-pink-1;
    }

    &--disabled {
      .ui-slider-handle,
      .ui-slider-range {
        background-color: @osu-colour-b1;
      }
    }
  }
}
